<template>
  <u-card v-if="item" padding="20rpx 30rpx" margin="20rpx 30rpx" :border="false" :show-foot="false" :show-head="false" class="item">
    
    <template #body>
      <view class="item-header flex items-center justify-between">
        <view class="text-[24rpx]">ID：{{item.id||''}}</view>
        <view class="status text-[24rpx]">
          <text v-if="item.status==1" class="text-[#009c00]">开启</text>
          <text v-else class="text-[#999]">已下线</text>
        </view>
      </view>
      <view class="item-body text-[#333]">
        <view class="title">
          <up-tag v-if="item.type==2" class="mr-[10rpx]" text="直播" size="mini"></up-tag>{{item.title||''}}
        </view>
        <view class="flex flex-wrap mt-[20rpx] text-[24rpx]">
          <view class="w-[50%] mb-[10rpx]">
            参与人数：<text class="text-[red]">{{item.dashboard?.dati_num||0}}</text>人
          </view>
          <view class="w-[50%]">
            发放人数：<text class="text-[red]">{{item.dashboard?.hongbao_num||0}}</text>人
          </view>
          <view class="w-[50%]">
            红包金额：<text class="text-[red]">{{item.dashboard?.hongbao_money||0}}</text>元
          </view>
          <view class="w-[50%]">
            学分数量：<text class="text-[red]">{{item.dashboard?.xuefen_num||0}}</text>分
          </view>
        </view>
      </view>
      <view class="item-footer">
        <u-button size="mini" shape="circle" type="primary" plain @click="handleDetail(item)">预览</u-button>
        <u-button size="mini" shape="circle" type="primary" plain @click="handleShowQrcode">推广</u-button>
        <!-- <u-button size="mini" :url="'/pages/admin/tongji?huodong_id='+item.id" type="primary" plain>门店统计</u-button> -->
        <u-button size="mini" shape="circle" type="primary" plain @click="handleNavigate(item)">数据</u-button>
        <u-button size="mini" shape="circle" type="primary" plain v-if="item.pay_model!=1" @click="handleSetData()">红包设置</u-button>
        <u-button size="mini" shape="circle" type="primary" plain>评论设置</u-button>
      </view>
    </template>
  </u-card>
</template>
<script lang="ts" setup>
import { redirect } from '@/utils/common';
import { type PropType } from 'vue';

defineProps({
  item: {
    type: Object as PropType<IActivityItem>,
  }
})

const emit = defineEmits(['qrcode', 'set'])

function handleShowQrcode() {
  emit('qrcode')
}
function handleSetData() {
  emit('set')
}

function handleNavigate(item: IActivityItem) {
  redirect({
    url: '/addon/htscrm/pages/admin/record/index',
    param: {
      id: item.id
    }
  })
}
function handleDetail(item: IActivityItem) {
  redirect({
    url: '/addon/htscrm/pages/admin/activity/detail',
    param: {
      id: item.id
    }
  })
}


</script>
<style lang="scss" scoped>
.item {
  line-height: normal;
  .item-header {
    line-height: 34rpx;
    border-bottom: 1px solid #eee;
    padding-bottom: 20rpx;
  }
  .item-body {
    padding: 20rpx 0;
  }
  .item-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    border-top: 1px solid #eee;
    padding-top: 20rpx;

    .u-button {
      width: auto;
      margin: 0;
      margin-right: 10rpx;
      margin-bottom: 10rpx;
    }
  }
}
</style>